﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<post-list></post-list>
		</div>
	
		<script>
			// 父组件
			Vue.component('PostList', {
  			data() {
  				return {
  					posts: [
  						{id: 1, title: '《Servlet/JSP深入详解》怎么样', author: '张三', date: '2019-10-21 20:10:15', vote: 0},
  						{id: 2, title: '《VC++深入详解》观后感', author: '李四', date: '2019-10-10 09:15:11', vote: 0},
  						{id: 3, title: '《Vue.js无难事》怎么样', author: '王五', date: '2019-11-11 15:22:03', vote: 0}
  					]
  				}
  			},
  			methods: {
  				// 自定义事件vote的事件处理器方法
  				handleVote(id){
  					this.posts.map(item => {
  						item.id === id ? {...item, voite: ++item.vote} : item;
  					})
  				}
  			},
	      template: `
	      	<div>
	      		<ul>
	      			<PostListItem 
	      				v-for="post in posts" 
	      				:key="post.id" 
	      				:post="post" 
	      				@vote="handleVote(post.id)"/> <!--监听自定义事件-->
	      		</ul>
	      	</div>`
  		});
  		
  		// 子组件
			Vue.component('PostListItem', {
				methods: {
					handleVote(){
						// 触发自定义事件
						this.$emit('vote');
					}
				},
				props: ['post'],
	      template: `
	      	<li>
	      		<p>
	      			<span>标题：{{post.title}} | 发帖人：{{post.author}} | 发帖时间：{{post.date}} | 点赞数：{{post.vote}}</span>
	      			<button @click="handleVote">赞</button>
	      		</p>
	      	</li>`
  		});
  		
			new Vue({
			  el: '#app'
			})
		</script>
	</body>
</html>